<template>
  <div>
    <block v-if="!mode">
      <view class="th-input" :class="[border ? 'border' : '', validateStatus]">
        <input
          v-bind:value="modelValue"
          :type="type"
          :disabled="!!disabled"
          :placeholder="placeholder"
          placeholder-class="placeholder"
          @input="onInput($event)"
        />
        <text v-if="clearable && modelValue" @click="clearHandle"></text>
      </view>
    </block>
    <block v-else>
      <textarea
        v-bind:value="modelValue"
        :disabled="!!disabled"
        :auto-height="!!autoHeight"
        :placeholder="placeholder"
        placeholder-class="placeholder"
        @input="onInput($event)"
        @linechange="lineChange"
        :class="[
          border ? 'border' : '',
          !autoHeight ? 'height' : '',
          validateStatus,
          lines > 1 ? 'mult-line' : '',
        ]"
      ></textarea>
    </block>
  </div>
</template>

<script lang="ts" setup name="" ThInput>
const props = defineProps({
  value: {
    type: [String],
  },
  placeholder: {
    type: String,
  },
  mode: {
    type: String,
  },
  type: {
    type: String,
  },
  clearable: {
    type: [Boolean, String],
    default: false,
  },
  border: {
    type: [Boolean, String],
    default: false,
  },
  disabled: {
    type: [Boolean, String],
    default: false,
  },
  autoHeight: {
    type: [Boolean, Number],
    default: false,
  },
  validate: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const validateStatus = ref('');
const modelValue = computed({
  get: () => {
    return props.value;
  },
  set: (val) => {
    emit('update:value', val);
  },
});

watch(
  () => props.value,
  (val) => {
    validate(val);
  },
);

const emit = defineEmits(['update:value', 'change']);

const validate = (val = modelValue.value) => {
  let valid = true;
  props.validate.forEach((rule: any) => {
    if (rule.trigger === 'change') {
      if (rule.required) {
        if (!val) {
          validateStatus.value = 'error';
          valid = false;
        } else {
          validateStatus.value = '';
          valid = true;
        }
      }
    }
  });
  return valid;
};
const onInput = (e) => {
  const val = e.detail.value;
  emit('update:value', val);
  emit('change');
};
const lines = ref(1);
const lineChange = (e) => {
  lines.value = e.detail.lineCount;
};

const clearHandle = () => {
  emit('update:value', '');
  emit('change');
};

defineExpose({ validate });
</script>

<style lang="scss" scoped>
.th-input {
  display: flex;
  font-size: 26rpx;
  overflow: hidden;
  align-items: center;
  &.border {
    &.error {
      border: 1px solid red !important;
    }
    border: 1px solid #dcdfe6;
    border-radius: 8rpx;
  }
  input {
    padding: 0 12rpx;
    flex: 1;
    height: 60rpx;
    background: #fff;
  }
  text {
    width: 28rpx;
    height: 28rpx;
    margin-right: 15rpx;
    position: relative;
    border-radius: 50%;
    background: #ccc;
    &::before {
      content: '';
      position: absolute;
      height: 1px;
      width: 9px;
      background: #fff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotateZ(45deg);
    }
    &::after {
      content: '';
      position: absolute;
      height: 1px;
      width: 9px;
      background: #fff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotateZ(-45deg);
    }
  }
}

textarea {
  text-align: left;
  padding: 0 12rpx;
  min-height: 60rpx;
  line-height: 60rpx;
  box-sizing: padding-box;
  border-radius: 5rpx;
  &.mult-line {
    line-height: 40rpx;
  }
  // display: flex;
  // align-items: center;
  &.height {
    height: 120rpx;
  }
  &.border {
    border: 1px solid;
    &.error {
      border-color: red;
    }
    border-color: #dcdfe6;
    border-radius: 8rpx;
  }
}
uni-textarea {
  width: auto !important;
}
.placeholder {
  color: #bfbfbf;
  font-size: 28rpx;
}
</style>
